<script setup>
import Export from "@/icons/Export.vue"
import Front from "@/icons/CustomerFront.vue"
import KeyBoard from "@/icons/KeyBoard.vue"
import Sigma from "@/icons/Sigma.vue"
import Back from "@/icons/CustomerBack.vue"
import EmojiFilled from "@/icons/EmojiFilled.vue"
import Replace from "@/icons/Replace.vue"
import ShortcutKey from "@/components/mind-map/ShortcutKey.vue"
import {ref} from 'vue'

const props = defineProps({
  selectRoot: Boolean,
  selected: Boolean,
  nodesLength: Number,
  isStart: Boolean,
  isEnd: Boolean
})

const emits = defineEmits(['clickTab'])

const clickTabEvent = (event) => {
  emits('clickTab', event)
}

const keyVisible = ref(false)

const showShortcutKey = () => {
  keyVisible.value = true
}
</script>

<template>
  <div class="fix-tabor">
    <div class="tabor-box">
      <el-tooltip
          effect="dark"
          content="回退"
          placement="bottom"
      >
        <el-button @click="clickTabEvent('exec_back')" :disabled="isStart">
          <template #icon>
            <el-icon>
              <Back/>
            </el-icon>
          </template>
        </el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="前进"
          placement="bottom"
      >
        <el-button @click="clickTabEvent('exec_forward')" :disabled="isEnd">
          <template #icon>
            <el-icon>
              <Front/>
            </el-icon>
          </template>
        </el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="添加同级节点"
          placement="bottom"
      >
        <el-button icon="Operation" @click="clickTabEvent('exec_insert_node')"
                   :disabled="!selected || selectRoot"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="添加下级节点"
          placement="bottom"
      >
        <el-button icon="Share" @click="clickTabEvent('exec_insert_child_node')" :disabled="!selected"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="删除节点"
          placement="bottom"
      >
        <el-button icon="Delete" @click="clickTabEvent('exec_remove_node')" :disabled="!selected"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="图片"
          placement="bottom"
      >
        <el-button icon="PictureFilled" @click="clickTabEvent('insert_image')" :disabled="!selected"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="图标"
          placement="bottom"
      >
        <el-button @click="clickTabEvent('insert_emoji')" :disabled="!selected">
          <template #icon>
            <el-icon>
              <EmojiFilled/>
            </el-icon>
          </template>
        </el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="超链接"
          placement="bottom"
      >
        <el-button icon="Link" @click="clickTabEvent('insert_link')" :disabled="!selected"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="备注"
          placement="bottom"
      >
        <el-button icon="EditPen" @click="clickTabEvent('insert_comment')" :disabled="!selected"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="公式"
          placement="bottom"
      >
        <el-button @click="clickTabEvent('insert_official')" :disabled="!selected">
          <template #icon>
            <el-icon>
              <Sigma/>
            </el-icon>
          </template>
        </el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="外框"
          placement="bottom"
      >
        <el-button icon="FullScreen" @click="clickTabEvent('exec_add_outer_frame')"
                   :disabled="!selected || selectRoot || nodesLength <= 1"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="节点样式"
          placement="bottom"
      >
        <el-button icon="MagicStick" @click="clickTabEvent('handle_style')" :disabled="!selected"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="回到根节点"
          placement="bottom"
      >
        <el-button icon="Aim" @click="clickTabEvent('handle_init')"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="查找"
          placement="bottom"
      >
        <el-button icon="Search" @click.stop="clickTabEvent('handle_search')"></el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="替换"
          placement="bottom"
      >
        <el-button @click.stop="clickTabEvent('handle_replace')">
          <template #icon>
            <el-icon>
              <Replace/>
            </el-icon>
          </template>
        </el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="快捷键"
          placement="bottom"
      >
        <el-button @click="showShortcutKey">
          <template #icon>
            <el-icon>
              <KeyBoard/>
            </el-icon>
          </template>
        </el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="导出"
          placement="bottom"
      >
        <el-button @click="clickTabEvent('handle_export')">
          <template #icon>
            <el-icon>
              <Export/>
            </el-icon>
          </template>
        </el-button>
      </el-tooltip>
    </div>
  </div>
  <shortcut-key v-model:visible="keyVisible"/>
</template>

<style scoped lang="scss">
.fix-tabor {
  position: absolute;
  left: 0;
  top: -4px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .tabor-box {
    background: #FFF;
    padding: 10px;
    border: var(--el-border);
    box-shadow: var(--el-box-shadow);
    border-radius: 6px;

    .el-button {
      padding: 4px 6px !important;
      height: 28px !important;
    }
  }
}
</style>